<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getMemberUnitListApi } from "../../service/applyaudit/applyaudit";
const router = useRouter()
const breadcround = ref(
  [
    { name: '首页', url: '/main/home' },
    { name: '会员单位', url: '/main/vipunit' }
  ]
)
let unitList = ref([])
let currentPage1 = ref(2)
function handleSizeChange(val) {

}
function handleCurrentChange(val) {
  currentPage1.value = val
}
function detailedClick(unitId) {
  router.push({ path: '/main/vipunitdetailed', query: { unitId: unitId } })
}
function getMemberUnitList() {
  getMemberUnitListApi().then((resp) => {
    console.log(resp);
    if (resp.data.code === 0) {
      unitList.value = resp.data.result;
    } else {

    }
  });
}

onMounted(() => {
  getMemberUnitList();
});
</script>

<template>
  <div>
    <div class="vipunitImg">
      <img src="@/assets/img/vipunitImg.png" alt="">
    </div>
    <div class="nav">
      <bread class="bread" :breadcround="breadcround" />
      <div>
        <template v-for="(item, index) in unitList" :key="item.unitId">
          <div class="unitItem">
            <div @click="detailedClick(item.unitId)" class="unitImg mright" v-if="index % 2 == 0"><img
                :src="item.coverImage" alt=""></div>
            <div class="msg" :class="index % 2 !== 0 ? 'msgright' : ''">
              <div @click="detailedClick(item.unitId)" class="title">{{ item.unitName }}</div>
              <div style="width: 60px;height: 2px;background: #D2D4D6;margin:25px 0"></div>
              <div class="context">{{ item.unitBrief }}</div>
              <div class="more" @click="detailedClick(item.unitId)">
                查看详情 >>
              </div>
            </div>
            <div class="unitImg mleft" v-if="index % 2 !== 0"><img :src="item.coverImage" alt=""></div>

          </div>
        </template>
      </div>
<!--      <pagination :currentPage1="currentPage1" :pageSize="10" :total="100" @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange" />-->
    </div>

  </div>
</template>

<style lang="less" scoped>
.vipunitImg {
  height: 280px;
  background: #1891FF;
}

.nav {
  // padding: 0 7.8%;
  width: 1500px;
  margin: 0 auto;

  .bread {
    margin: 24px 0 48px;
  }

  .unitItem:last-child {
    border-bottom: none;
  }

  .unitItem {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #DEDFE0;
    margin: 40px 0;
    padding-bottom: 40px;



    .unitImg {
      width: 520px;
      height: 300px;
      background: #1891FF;
      border-radius: 20px;
      flex-shrink: 0;
      overflow: hidden;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .mleft {
      margin-left: 60px;
    }

    .mright {
      margin-right: 60px;
    }

    .msgright {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
    }

    .msg {

      .title {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        cursor: pointer;
      }

      .context {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #787878;
        line-height: 36px;
        overflow: hidden; //超出隐藏
        text-overflow: ellipsis; //超出使用省略号
        display: -webkit-box;
        -webkit-line-clamp: 4; //第几行
        -webkit-box-orient: vertical;
      }

      .more {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1891FF;
        line-height: 36px;
        margin-top: 20px;
        width: 100%;
        cursor: pointer;
      }
    }
  }
}
</style>
